<template>  
    <div id="login">  
        <div class="toggle-buttons">  
            <button @click="switchToUser" :class="{ active: isUser }">客户版</button>  
            <button @click="switchToEnterprise" :class="{ active: !isUser }">企业版</button>  
        </div>  

        <div v-if="isUser" class="login-box user-login">  
            <h2>客户版</h2>  
            <input type="text" v-model="username" placeholder="请输入用户名" />  
            <input type="password" v-model="password" placeholder="请输入密码" />  
            <button @click="userlogin">用户登录</button>  
        </div>  

        <div v-else class="login-box enterprise-login">  
            <h2>企业版</h2>  
            <select v-model="checkrole" class="select-role">  
                <option value="">请选择角色</option>  
                <option value="66f2038e444a2ccc1789a697">商户</option>  
                <option value="66f20425444a2ccc1789a699">管理员</option>  
            </select>  
            <input type="text" v-model="enterprisename" placeholder="请输入商户/管理员用户名" />  
            <input type="password" v-model="enterprisepassword" placeholder="请输入商户/管理员密码" />  
            <button @click="enterpriselogin">商户/管理员登录</button>  
        </div>  
    </div>  
</template>  

<script setup>  
import { ref } from 'vue'  
import axios from 'axios'  
import { useRouter } from 'vue-router'  

axios.defaults.baseURL = 'http://127.0.0.1:3000'  
const router = useRouter()  

const enterprisename = ref('')  
const enterprisepassword = ref('')  
const username = ref('')  
const password = ref('')  
const checkrole = ref('')  
const isUser = ref(true) // 默认选择客户版  

const switchToUser = () => {  
    isUser.value = true  
}  

const switchToEnterprise = () => {  
    isUser.value = false  
}  
//用户登录
const userlogin = async () => {  
    const obj = {  
        username: username.value,  
        password: password.value  
    }  
    const {  
        data: { code }  
    } = await axios.post('/userlogin', obj)  
    if (code === 200) {  
        router.push('/userHome')  
    } else {  
        alert('用户名或密码错误')  
    }  
}  
//管理员或商家登录
const enterpriselogin = async () => {  
    if (!checkrole.value) {  
        alert('请先选择角色')  
        return  
    }  

    const obj = {  
        username: enterprisename.value,  
        password: enterprisepassword.value,  
        roleid: checkrole.value // 添加角色 ID  
    }  
    const {  
        data: { code, role,rolename, permissions_list }  
    } = await axios.post('/enterpriselogin', obj)  
    if (code === 200) {  
        localStorage.setItem('roleId', JSON.stringify(role)) // 存储角色id  
        localStorage.setItem('rolename', JSON.stringify(rolename)) // 存储角色名  
        localStorage.setItem('permissions_list', JSON.stringify(permissions_list))
        if (role == '66f2038e444a2ccc1789a697') {
            router.push('/home/businessHome') 
        }  else if (role == '66f20425444a2ccc1789a699') {
            router.push('/home/adminHome')
        }
    } else {  
        alert('您暂未获取权限')  
    }  
}  
</script>  

<style scoped>  
#login {  
    max-width: 400px;  
    min-height: 400px;
    margin: auto;  
    padding: 30px;  
    border-radius: 8px;  
    background: linear-gradient(135deg, #72b9ff, #4276f5);  
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);  
    animation: fadeIn 1s ease forwards;  
}  

@keyframes fadeIn {  
    from {  
        opacity: 0;  
    }  
    to {  
        opacity: 1;  
    }  
}  

.toggle-buttons {  
    display: flex;  
    justify-content: space-between;  
    margin-bottom: 20px;  
}  

.toggle-buttons button {  
    flex: 1;  
    padding: 12px;  
    border: none;  
    background-color: #fff;  
    color: #007bff;  
    border-radius: 4px;  
    cursor: pointer;  
    transition: transform 0.2s, background-color 0.3s, box-shadow 0.3s;  
    margin: 0 5px;  
    font-weight: bold;  
    font-size: 16px;  
}  

.toggle-buttons button.active {  
    background-color: #007bff;  
    color: #fff;  
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);  
}  

.toggle-buttons button:hover {  
    background-color: rgba(0, 123, 255, 0.1);  
    color: #007bff;  
    transform: translateY(-2px);  
}  

.login-box {  
    display: flex;  
    flex-direction: column;  
    background: rgba(255, 255, 255, 0.9);  
    padding: 20px;  
    border-radius: 8px;  
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);  
}  

.login-box h2 {  
    margin-bottom: 20px;  
    text-align: center;  
    color: #333;  
    font-size: 24px;  
}  

.login-box input,  
.login-box select {  
    padding: 12px;  
    margin-bottom: 15px;  
    border: 1px solid #ccc;  
    border-radius: 4px;  
    transition: border-color 0.3s;  
    font-size: 16px;  
}  

.login-box input:focus,  
.login-box select:focus {  
    border-color: #007bff;  
    outline: none;  
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);  
}  

.login-box button {  
    padding: 12px;  
    border: none;  
    background-color: #007bff;  
    color: #fff;  
    border-radius: 4px;  
    cursor: pointer;  
    transition: background-color 0.3s, transform 0.2s, box-shadow 0.2s;  
    font-size: 16px;  
}  

.login-box button:hover {  
    background-color: #0056b3;  
    transform: translateY(-2px);  
}  

.login-box button:disabled {  
    background-color: #ccc;  
    cursor: not-allowed;  
}  

.alert {  
    color: red;  
    font-size: 14px;  
    text-align: center;  
    margin-top: 10px;  
}  
</style>

